

<!DOCTYPE html>
<html lang="zh-CN">

<head><meta name="generator" content="Hexo 3.9.0">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>更优雅地恢复 recyclerview 的滚动位置 - 杨云召 | 博客</title>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="google" content="notranslate">

  
  
  <meta name="description" content="更优雅地恢复 recyclerview 的滚动位置

..."> 
  
  <meta name="author" content="杨云召（Flywith24）"> 

  
    <link rel="icon" href="/images/icons/favicon-16x16.png" type="image/png" sizes="16x16">
  
  
    <link rel="icon" href="/images/icons/favicon-32x32.png" type="image/png" sizes="32x32">
  
  
    <link rel="apple-touch-icon" href="/images/icons/apple-touch-icon.png" sizes="180x180">
  
  
    <meta rel="mask-icon" href="/images/icons/stun-logo.svg" color="#333333">
  
  
    <meta rel="msapplication-TileImage" content="/images/icons/favicon-144x144.png">
    <meta rel="msapplication-TileColor" content="#000000">
  

  <link rel="stylesheet" href="/css/style.css">

  
  <link rel="stylesheet" href="//at.alicdn.com/t/font_1445822_hhodbqn7tit.css">
  

  
  
  <link rel="stylesheet" href="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.css">
  

  
  
  <link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/xcode.min.css">
  

  <script>
    var CONFIG = window.CONFIG || {};
    var ZHAOO = window.ZHAOO || {};
    CONFIG = {
      isHome: false,
      fancybox: true,
      pjax: false,
      lazyload: {
        enable: true,
        loadingImage: '/images/theme/loading.gif',
      },
      donate: {
        enable: true,
        alipay: 'https://gitee.com/flywith24/Album/raw/master/img/20201015113301.jpg',
        wechat: 'https://gitee.com/flywith24/Album/raw/master/img/20201015112814.png'
      },
      motto: {
        api: '',
        default: '不人云亦云，只求接近真相.'
      },
      galleries: {
        enable: true
      },
      fab: {
        enable: true,
        alwaysShow: false
      },
      carrier: {
        enable: true
      },
      daovoice: {
        enable: true
      }
    }
  </script>

  

  
</head></html>
<body class="lock-screen">
  <div class="loading"></div>
  


<nav class="navbar">
  <div class="left"></div>
  <div class="center">更优雅地恢复 recyclerview 的滚动位置</div>
  <div class="right">
    <i class="iconfont iconmenu j-navbar-menu"></i>
  </div>
</nav>

  <nav class="menu">
  <div class="menu-wrap">
    <div class="menu-close">
      <i class="iconfont iconbaseline-close-px"></i>
    </div>
    <ul class="menu-content">
      
      
      
      
      <li class="menu-item"><a href="/ " class="underline"> 首页</a></li>
      
      
      
      
      <li class="menu-item"><a href="/archives " class="underline"> 归档</a></li>
      
      
      
      
      <li class="menu-item"><a href="/tags " class="underline"> 标签</a></li>
      
      
      
      
      <li class="menu-item"><a href="/categories " class="underline"> 分类</a></li>
      
      
      
      
      <li class="menu-item"><a href="/about " class="underline"> 关于</a></li>
      
    </ul>
    <div class="menu-copyright"><p>Copyright© 2017 - 2020 ❤️ Flywith24</p></div>
  </div>
</nav>
  <main id="main">
  <div class="container" id="container">
    <article class="article">
  <div class="wrap">
    <section class="head">
  <img   class="lazyload" data-original="https://gitee.com/flywith24/Album/raw/master/img/20201015103136.png" src=""  draggable="false">
  <div class="head-mask">
    <h1 class="head-title">更优雅地恢复 recyclerview 的滚动位置</h1>
    <div class="head-info">
      <span class="post-info-item"><i class="iconfont iconcalendar"></i>四月 09, 2020</span
        class="post-info-item">
      
      <span class="post-info-item"><i class="iconfont iconfont-size"></i>3255</span>
    </div>
  </div>
</section>
    <section class="main">
      <section class="content">
        <h2 id="被我忽视的更新"><a href="#被我忽视的更新" class="headerlink" title="被我忽视的更新"></a>被我忽视的更新</h2><p><code>androidx recyclerview 1.2.0-alpha02</code> 版本添加了新功能 <a href="https://developer.android.com/reference/androidx/recyclerview/widget/MergeAdapter" target="_blank" rel="noopener">MergeAdapter</a>，帮助开发者更容易地为 RecyclerView 添加 Header 和 Footer。详情参见 <a href="https://juejin.im/post/5e86ffea51882573ba207a19" target="_blank" rel="noopener">【译】MergeAdapter 的使用 使用官方 API 为 Recyclerview 添加 Header 和 Footer</a></p>
<p>该版本中还有一个改动：<strong><code>RecyclerView.Adapter</code> lazy state restoration</strong>，帮助开发者恢复 RecyclerView 的状态</p>
<!-- more-->

<p><img class="lazyload" data-original="https://gitee.com/flywith24/Album/raw/master/img/20200512105548.png" src="/2020/04/09/Jetpack-Recyclerview-Scoroll/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt="recyclerview update"></p>
<p>我对这个功能并没有什么感觉。众所周知，Android 中的 View 内部是有着状态保存和恢复的方法的。RecyclerView 也是如此，它可以恢复自身已滚动的位置</p>
<p><img class="lazyload" data-original="https://gitee.com/flywith24/Album/raw/master/img/20200512110411.png" src="/2020/04/09/Jetpack-Recyclerview-Scoroll/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt="View 内部恢复状态"></p>
<p>有关状态保存的内容可以参见 <a href="https://juejin.im/post/5e738d12518825495d69cfb9" target="_blank" rel="noopener">【背上Jetpack】绝不丢失的状态 androidx SaveState ViewModel-SaveState 分析</a></p>
<p>真实情况也是如此</p>
<p><img class="lazyload" data-original="https://gitee.com/flywith24/Album/raw/master/img/20200512111315.gif" src="/2020/04/09/Jetpack-Recyclerview-Scoroll/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt="RecyclerView 内部可以恢复滚动位置"></p>
<h2 id="意外发现"><a href="#意外发现" class="headerlink" title="意外发现"></a>意外发现</h2><p>最近看到 <a href="https://medium.com/@florina.muntenescu?source=post_page-----a8fbdc9a9334----------------------" target="_blank" rel="noopener">Florina Muntenescu</a> 的 <a href="https://medium.com/androiddevelopers/restore-recyclerview-scroll-position-a8fbdc9a9334" target="_blank" rel="noopener">Restore RecyclerView scroll position</a> ，其中介绍了 <strong><code>RecyclerView.Adapter</code> lazy state restoration</strong>，这勾起了我的兴趣</p>
<p><img class="lazyload" data-original="https://gitee.com/flywith24/Album/raw/master/img/20200512111720.png" src="/2020/04/09/Jetpack-Recyclerview-Scoroll/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt="意外发现"></p>
<p>如文中描述，RecyclerView 在 activity/fragment 重建时失去滚动位置是因为 Adapter 中的数据是 <strong>异步</strong> 加载的，当 RecyclerView layout 时数据并没有加载，因此也恢复不了之前的位置状态。一个比较简单的例子是使用 Navigation 组件进行导航，返回时 fragment 中的 RecyclerView 由于再次调用接口获取数据，导致其滑动位置失去</p>
<p><img class="lazyload" data-original="https://gitee.com/flywith24/Album/raw/master/img/20200512113141.gif" src="/2020/04/09/Jetpack-Recyclerview-Scoroll/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt="延迟加载数据，无法恢复滚动位置"></p>
<h2 id="解决方案"><a href="#解决方案" class="headerlink" title="解决方案"></a>解决方案</h2><p>有几种方法可以保证 RecyclerView 恢复到正确的滚动位置，最好的办法是借助缓存，ViewModel 或 Repository 中缓存要显示的数据，确保始终在第一个布局传入前在 Adapter 上设置数据。也有一些其他的方案，这些方案要么太复杂，要么不够优雅</p>
<p><code>recyclerview:1.2.0-alpha02</code> 中的解决方案是提供一个新的 Adapter 方法，该方法允许设置状态恢复策略，它有三个选项</p>
<ul>
<li><a href="https://developer.android.com/reference/androidx/recyclerview/widget/RecyclerView.Adapter.StateRestorationPolicy#ALLOW" target="_blank" rel="noopener">ALLOW</a></li>
<li><a href="https://developer.android.com/reference/androidx/recyclerview/widget/RecyclerView.Adapter.StateRestorationPolicy#PREVENT_WHEN_EMPTY" target="_blank" rel="noopener">PREVENT_WHEN_EMPTY</a></li>
<li><a href="https://developer.android.com/reference/androidx/recyclerview/widget/RecyclerView.Adapter.StateRestorationPolicy#PREVENT" target="_blank" rel="noopener">PREVENT</a></li>
</ul>
<h3 id="ALLOW"><a href="#ALLOW" class="headerlink" title="ALLOW"></a>ALLOW</h3><p>这是 <strong>默认</strong> 的状态，它会立即恢复 RecyclerView 的状态，该种策略无法解决延迟加载的数据的问题，可以使用 <code>PREVENT_WHEN_EMPTY</code></p>
<h3 id="PREVENT-WHEN-EMPTY"><a href="#PREVENT-WHEN-EMPTY" class="headerlink" title="PREVENT_WHEN_EMPTY"></a>PREVENT_WHEN_EMPTY</h3><p>仅当 Adapter 不为空（adapter.getItemCount() &gt; 0）时，才恢复 RecyclerView 状态。 如果您的数据是异步加载的，那么 RecyclerView 会一直等到数据加载完毕，然后状态才能恢复。 如果您有默认 item（例如 Header 或 加载指示器）作为适配器的一部分，则应该使用<code>PREVENT</code> 选项，除非使用 MergeAdapter 添加了默认 item。 MergeAdapter 等待所有适配器准备就绪，然后才恢复状态</p>
<h3 id="PREVENT"><a href="#PREVENT" class="headerlink" title="PREVENT"></a>PREVENT</h3><p>状态不会恢复，直到配置了 <code>ALLOW</code> 或者 <code>PREVENT_WHEN_EMPTY</code></p>
<p>使用方式如下：</p>
<figure class="highlight kotlin"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs kotlin">adapter.stateRestorationPolicy = PREVENT_WHEN_EMPTY<br></code></pre></td></tr></table></figure>

<p><strong>加入了上面的配置后即使是异步加载数据也能恢复 RecyclerView 的位置</strong></p>
<p><img class="lazyload" data-original="https://gitee.com/flywith24/Album/raw/master/img/20200512114332.gif" src="/2020/04/09/Jetpack-Recyclerview-Scoroll/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt="设置 PREVENT_WHEN_EMPTY"></p>
<h2 id="追踪引入过程"><a href="#追踪引入过程" class="headerlink" title="追踪引入过程"></a>追踪引入过程</h2><p>老规矩，我们沿着官方的 commit log 来看看其实现原理</p>
<p>首先我们看看 <a href="https://issuetracker.google.com/issues/146365793" target="_blank" rel="noopener">IssueTracker 上提的 Feature</a></p>
<p><img class="lazyload" data-original="https://gitee.com/flywith24/Album/raw/master/img/20200512115048.png" src="/2020/04/09/Jetpack-Recyclerview-Scoroll/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt="IssueTracker"></p>
<p>表达的意思也很简单，就是当加载异步数据时 RecyclerView 的位置状态无法恢复，Adapter 应该提供相关的解决方案</p>
<p>有意思的是，实现该功能时还重新实现了前一个版本的逻辑，我在 git commit log 中看到了 revert 操作</p>
<p><img class="lazyload" data-original="https://gitee.com/flywith24/Album/raw/master/img/20200512140140.png" src="/2020/04/09/Jetpack-Recyclerview-Scoroll/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt="revert操作"></p>
<p><img class="lazyload" data-original="https://gitee.com/flywith24/Album/raw/master/img/20200512120004.png" src="/2020/04/09/Jetpack-Recyclerview-Scoroll/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt></p>
<p>为了防止 <code>LayoutManager#onRestore</code> 执行多次，没有采用最开始的实现方式。但 Yigit Boyar (这个提交的开发者) 仍然希望使用最开始的实现方式，但是  <code>LayoutManager#onRestoreInstance</code> 的状态时 public ，因此只能选取一个折中的方案</p>
<p><img class="lazyload" data-original="https://gitee.com/flywith24/Album/raw/master/img/20200512141210.png" src="/2020/04/09/Jetpack-Recyclerview-Scoroll/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt="新的实现方案"></p>
<p><img class="lazyload" data-original="https://gitee.com/flywith24/Album/raw/master/img/20200512141445.png" src="/2020/04/09/Jetpack-Recyclerview-Scoroll/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt="无奈之举"></p>
<p>过去，开发者会无意间调用 <code>onRestoreInstanceState(State)</code> 方法。例如，一些开发者已使用它来手动设置自己更新的状态，这样即使在此状态之前已恢复，在此处传递状态也将导致 LayoutManager 接收它并相应地更新其内部状态。因此，即使看起来好像很奇怪，也必须始终调用 <code>requestLayout</code> 来保留功能</p>
<h2 id="源码分析"><a href="#源码分析" class="headerlink" title="源码分析"></a>源码分析</h2><p>接下来我们来分析这部分源码，内容很少，所以我们详细看下</p>
<p>首先是引入 <code>StateRestorationPolicy</code>的枚举</p>
<p><img class="lazyload" data-original="https://gitee.com/flywith24/Album/raw/master/img/20200512143600.png" src="/2020/04/09/Jetpack-Recyclerview-Scoroll/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt></p>
<p>然后需要提供 <code>setStateRestorationPolicy</code> 和 <code>getStateRestorationPolicy</code> 方法，此时我们还需要一个方法来判断是否要将 SavedState 传递给 LayoutManager</p>
<p><img class="lazyload" data-original="https://gitee.com/flywith24/Album/raw/master/img/20200512143459.png" src="/2020/04/09/Jetpack-Recyclerview-Scoroll/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt></p>
<p>前面的 <code>setStateRestorationPolicy</code> 方法中 调用了 <code>notifyStateRestorationPolicyChanged</code>，而 <code>notifyStateRestorationPolicyChanged</code> 为静态类 <code>AdapterDataObservable</code> 中的方法，该类中的其他方法我们也很熟悉，均是刷新 Adapter 中数据的方法。</p>
<p><img class="lazyload" data-original="https://gitee.com/flywith24/Album/raw/master/img/20200512143858.png" src="/2020/04/09/Jetpack-Recyclerview-Scoroll/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt="notifyStateRestorationPolicyChanged"></p>
<p>而 <code>notifyStateRestorationPolicyChanged</code> 中调用了 mObservers list 中元素的 <code>onStateRestorationPolicyChanged</code> 方法，通过源码我们得知该 list 中的元素类型为 <code>AdapterDataObserver</code>，因此还需要在 <code>AdapterDataObserver</code> 中加入 <code>onStateRestorationPolicyChanged</code> 方法</p>
<p><img class="lazyload" data-original="https://gitee.com/flywith24/Album/raw/master/img/20200512144501.png" src="/2020/04/09/Jetpack-Recyclerview-Scoroll/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt="onStateRestorationPolicyChanged "></p>
<p>该方法是个空实现，而 <code>RecyclerViewDataObserver</code> 重写了该方法</p>
<p><img class="lazyload" data-original="https://gitee.com/flywith24/Album/raw/master/img/20200512144716.png" src="/2020/04/09/Jetpack-Recyclerview-Scoroll/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt="RecyclerViewDataObserver "></p>
<p>配置恢复策略以及恢复策略变化时的监听都有了，接下来要做的就是如果之前有待恢复的装则恢复之前的状态</p>
<p><img class="lazyload" data-original="https://gitee.com/flywith24/Album/raw/master/img/20200512145152.png" src="/2020/04/09/Jetpack-Recyclerview-Scoroll/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt="恢复状态"></p>
<blockquote>
<p>注意：发布之前 <code>StateRestorationPolicy</code> 叫做 <code>StateRestorationStrategy</code>，后来命名为 <code>StateRestorationPolicy</code>，alpha 版本的库可能随时更改 API 的命名和删除 API，因此查看这部分源码的同学请注意</p>
</blockquote>
<p>至此，相关的源码都在这里了</p>
<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p><code>StateRestorationPolicy</code> 提供了 RecyclerView 异步加载数据恢复滚动位置的解决方案。原理就是通过配置 <code>StateRestorationPolicy</code> 来改变恢复策略，同时在策略改变时调用 <code>requestLayout</code> 方法。在 <code>dispatchLayoutStep2()</code> (该方法会在 onLayout 和 measure 方法中调用) 方法中恢复状态(如果 <code>canRestoreState()</code> 返回 true)</p>
<p><a href="https://github.com/Flywith24/Flywith24-Jetpack-Demo/tree/master/demo_recyclerview_scroll" target="_blank" rel="noopener">demo 地址</a></p>
<p><strong>一点思考：我们都知道 ViewPager2 是使用 RecyclerView 实现的，那么借助本文介绍的 API 可以做点什么吗？</strong></p>
<p>欢迎各位小伙伴在评论区留言，说说你的想法</p>
<h2 id="关于我"><a href="#关于我" class="headerlink" title="关于我"></a>关于我</h2><p>我是 <a href="https://flywith24.gitee.io/">Flywith24</a>，我的博客内容已经分类整理 <a href="https://github.com/Flywith24/BlogList" target="_blank" rel="noopener">在这里</a>，点击右上角的 Watch 可以及时获取我的文章更新哦 😉</p>
<ul>
<li><p><a href="https://juejin.im/user/57c7f6870a2b58006b1cfd6c" target="_blank" rel="noopener">掘金</a></p>
</li>
<li><p><a href="https://xiaozhuanlan.com/detail" target="_blank" rel="noopener">小专栏</a></p>
</li>
<li><p><a href="https://github.com/Flywith24" target="_blank" rel="noopener">Github</a></p>
</li>
</ul>
<p><img class="lazyload" data-original="https://gitee.com/flywith24/Album/raw/master/img/20200508153754.jpg" src="/2020/04/09/Jetpack-Recyclerview-Scoroll/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt></p>
      </section>
      <section class="extra">
        
        <ul class="copyright">
  
  <li><strong>本文作者：</strong>杨云召（Flywith24）</li>
  <li><strong>本文链接：</strong><a href="https://flywith24.gitee.io/2020/04/09/Jetpack-Recyclerview-Scoroll/index.html">https://flywith24.gitee.io/2020/04/09/Jetpack-Recyclerview-Scoroll/index.html</a></li>
  <li><strong>版权声明：</strong>本博客所有文章均采用<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh"
      rel="external nofollow" target="_blank"> BY-NC-SA </a>许可协议，转载请注明出处！</li>
  
</ul>
        
        
        <section class="donate">
  <div class="qrcode">
    <img   class="lazyload" data-original="https://gitee.com/flywith24/Album/raw/master/img/20201015113301.jpg" src="" >
  </div>
  <div class="icon">
    <a href="javascript:;" id="alipay"><i class="iconfont iconalipay"></i></a>
    <a href="javascript:;" id="wechat"><i class="iconfont iconwechat-fill"></i></a>
  </div>
</section>
        
        
  <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/Jetpack/">Jetpack</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/MVVM/">MVVM</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/RecyclerView/">RecyclerView</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/androidx/">androidx</a></li></ul>

        
<nav class="nav">
  
    <a href="/2020/04/15/Tips-Components-Jump/"><i class="iconfont iconleft"></i>Android 组件化不使用 Router 如何实现组件间 activity 跳转</a>
  
  
    <a href="/2020/04/09/Jetpack-fragment-onActivityCreated-Deprecated/">终于动手了，onActivityCreated 被弃用<i class="iconfont iconright"></i></a>
  
</nav>

      </section>
      
      <section class="comments">
  
  <div class="btn" id="comments-btn">查看评论</div>
  
  
<div id="valine"></div>
<script defer src="//unpkg.com/valine/dist/Valine.min.js"></script>
<script>
  window.onload = function () {
    var loadValine = function () {
      new Valine({
        el: '#valine',
        app_id: "SHA3gzCcxFlqaPcGRnX4UgET-gzGzoHsz",
        app_key: "OYo7ITS4AzTvBUvb1yIY8oaf",
        placeholder: "期待你的留言",
        avatar: "mp",
        pageSize: "10",
        lang: "zh-CN",
      });
    }
    if ( true ) {
      $("#comments-btn").on("click", function () {
        $(this).hide();
        loadValine();
      });
    } else {
      loadValine();
    }
  };
</script>

</section>
      
    </section>
  </div>
</article>
  </div>
</main>
  <footer class="footer">
  <div class="footer-social">
    
    
    
    
    
    <a href="tencent://message/?Menu=yes&uin=1032367864 " target="_blank" onMouseOver="this.style.color= '#12B7F5'"
      onMouseOut="this.style.color='#33333D'">
      <i class="iconfont footer-social-item  iconQQ "></i>
    </a>
    
    
    
    
    
    <a href="javascript:; " target="_blank" onMouseOver="this.style.color= '#8bc34a'"
      onMouseOut="this.style.color='#33333D'">
      <i class="iconfont footer-social-item  iconwechat-fill "></i>
    </a>
    
    
    
    
    
    <a href="https://flywith24.gitee.io/about/ " target="_blank" onMouseOver="this.style.color= '#d32f2f'"
      onMouseOut="this.style.color='#33333D'">
      <i class="iconfont footer-social-item  iconheart "></i>
    </a>
    
    
    
    
    
    <a href="https://github.com/Flywith24 " target="_blank" onMouseOver="this.style.color= '#24292E'"
      onMouseOut="this.style.color='#33333D'">
      <i class="iconfont footer-social-item  icongithub-fill "></i>
    </a>
    
    
    
    
    
    <a href="mailto:youngyunzhao@163.com " target="_blank" onMouseOver="this.style.color='#FFBE5B'"
      onMouseOut="this.style.color='#33333D'">
      <i class="iconfont footer-social-item  iconmail"></i>
    </a>
    
  </div>
  <div class="footer-copyright"><p>Copyright© 2017 - 2020 ❤️ Flywith24</p></div>
</footer>
  
      <div class="fab fab-plus">
    <i class="iconfont iconplus"></i>
  </div>
  
  <div class="fab fab-daovoice">
    <i class="iconfont iconcomment"></i>
  </div>
  
  <div class="fab fab-up">
    <i class="iconfont iconcaret-up"></i>
  </div>
  
<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/shizuku.model.json"},"display":{"position":"left","width":150,"height":300},"mobile":{"show":"tfalse"},"log":false});</script></body>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>




<script src="https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>




<script src="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.js"></script>




<script src="/js/utils.js"></script>
<script src="/js/modules.js"></script>
<script src="/js/zui.js"></script>
<script src="/js/script.js"></script>




<script>
  (function (i, s, o, g, r, a, m) {
    i["DaoVoiceObject"] = r;
    i[r] = i[r] || function () {
      (i[r].q = i[r].q || []).push(arguments)
    }, i[r].l = 1 * new Date();
    a = s.createElement(o), m = s.getElementsByTagName(o)[0];
    a.async = 1;
    a.src = g;
    a.charset = "utf-8";
    m.parentNode.insertBefore(a, m)
  })(window, document, "script", ('https:' == document.location.protocol ? 'https:' : 'http:') +
    "//widget.daovoice.io/widget/0f81ff2f.js", "daovoice")
  daovoice('init', {
    app_id: "7785620b"
  }, {
    launcher: {
      disableLauncherIcon: true,
    },
  });
  daovoice('update');
</script>



<script>
  (function () {
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
      bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    } else {
      bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
  })();
</script>


<script>
  var _hmt = _hmt || [];
  (function () {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?4c204d8bc027a0455b5fc642ac334ca8";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
  })();
</script>










</html>